<template>
  <div class="my-topic-wrap auto">
    <p class="breadcrumb">
      <span class="color" v-show="scintillator">
        <span class="sp1"></span>
        <span class="sp2"></span>
        <span class="sp3"></span>
      </span>
      <router-link :to="{name:'subscribe', params: {id: 1}}">我的订阅</router-link>
      <span>&gt;{{routerName}}</span>
    </p>
    <ul class="sub-menu flex">
      <li>
        <router-link :to="{name:'topicAll'}">所有订阅（{{all}}）</router-link>
      </li>
      <li>
        <router-link :to="{name:'topicSelect'}">我的订阅（{{myTopic}}）</router-link>
      </li>
    </ul>
    <router-view @turn="cx"></router-view>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    name: 'topic',
    data () {
      return {
        routerName: '所有订阅',
        scintillator: false
      }
    },
    computed: {
      ...mapState('topic', [
        'all', 'myTopic'
      ])
    },
    watch: {
      $route () {
        if (this.$route.name === 'topicAll') {
          this.routerName = '所有订阅'
        } else {
          this.routerName = '我的订阅'
        }
      }
    },
    created () {
      this.$store.dispatch('topic/getAll')
      this.$store.dispatch('topic/getMyTopic')
    },
    methods: {
      cx () {
        // 我的订阅闪烁体
        // this.scintillator = true
      }
    }
  }
</script>

<style lang="scss">
.my-topic-wrap{
  padding-top:50px;
  width:1000px;
  .breadcrumb{
    font-size: 15px;
    color: #24282e;
    display: flex;
    align-items: center;
    position: relative;
    .color{
      width: 65px;
      height: 20px;
      position: absolute;
      top: 16px;
      left: -4px;
      display: flex;
      /*opacity: 0;*/
      justify-content: space-around;
      align-items: center;
      .sp1{
        display: block;
        width: 10px;
        height: 10px;
        opacity: 0;
        background: #00ba91;
        border-radius: 50%;
        animation: dong1 3s ease infinite;
      }
      .sp2{
        display: block;
        width: 10px;
        height: 10px;
        opacity: 0;
        background: #00ba91;
        border-radius: 50%;
        animation: dong2 3s 1s ease infinite;
      }
      .sp3{
        display: block;
        width: 10px;
        height: 10px;
        opacity: 0;
        background: #00ba91;
        border-radius: 50%;
        animation: dong3 3s 2s ease infinite;
      }
      @keyframes dong1 {
        0%,75% {opacity: 1;}
        87.5% {opacity: 1;}
        100% {opacity: 0;}
      }
      @keyframes dong2 {
        0%,75% {opacity: 1;}
        87.5% {opacity: 1;}
        100% {opacity: 0;}
      }
      @keyframes dong3 {
        0%,75% {opacity: 1;}
        87.5% {opacity: 1;}
        100% {opacity: 0;}
      }
    }
  }
  .sub-menu {
    margin-top:20px;
    background-color:#e9edf2;
    a{
      display: block;
      width:180px;
      height:35px;
      line-height: 35px;
      text-align: center;
      &.router-link-active{
        background-color:#fff;
      }
    }
  }
  .list-wrap{
    background-color: #fff;
    padding:20px 40px;
    li{
      padding:10px 15px;
      float: left;
      width:100%;
      position: relative;
      border: 1px solid #e9edf2;
      transition: all .15s ease-in-out;
      margin-bottom: 15px;
      &:hover{
        border: 1px solid #00ba91;
      }
    }
    .item-left,.item-right{
      float: left;
    }
    .item-left{
      width:80px;
      height:80px;
      img{
        width:100%;
        height:100%;
      }
    }
    .item-right{
      margin-left:15px;
      width: 75%;
      .title{
        font-size: 18px;
        color: #33383e;
        margin-top: 8px;
      }
      .description{
        font-size: 14px;
        color: #606873;
        margin-top:12px;
      }
      .btn-wrap{
        position: absolute;
        right:28px;
        top:25px;
        button{
          display: inline-block;
          width:90px;
          height:35px;
          line-height: 35px;
          border:1px solid #606873;
          text-align: center;
          border-radius: 5px;
          cursor: pointer;
          font-size:16px;
          color:#606873;
          &.like{
            background-color: #00ba91;
            color:#fff;
            border:1px solid #00ba91;
          }
        }
        p{
          font-size:12px;
          color:#606873;
          margin-top:10px;
          text-align: center;
        }
      }
    }
  }
}
</style>
